<template>
  <div>
    <el-row :gutter="20">
      <!-- :disabled="terminalDialog.disabled" -->
      <el-form 
        label-width="120px"
        :model="terminalDialogForm"
        :rules="terminalDialogRules"
        ref="terminalDialogForm"
        >
       
        <el-col :span="12">
          <el-form-item label="设备类型:">
            <el-input value="音响" readonly size="small"></el-input>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="品牌名称:" prop="rpsNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpsNo"
              :placeholder="[!terminalDialog.disabled?'请选择品牌名称':' ']"
              @change="rpsNoListChange"
            >
              <el-option
                v-for="item in rpsNoList"
                :key="item.rpsNo"
                :label="item.rpsName"
                :value="item.rpsNo"
              >
                <span style="float: left">{{ item.rpsName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpsNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="设备型号:" prop="rpmNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpmNo"
              placeholder="请选择设备型号"
              @change="rpmNoChange"
            >
              <el-option
                v-for="item in rpmNoList"
                :key="item.rpmNo"
                :label="item.rpmName"
                :value="item.rpmNo"
              >
              <span style="float: left">{{ item.rpmName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpmNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="设备编号:" prop="rsSn">
            <el-input v-model="terminalDialogForm.rsSn" @change="apiQueryStoreBySn" :disabled="terminalDialog.type=='edit'?true:false" placeholder="请输入设备编号" size="small"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="设备简称:" prop="rtName">
            <el-input v-model="terminalDialogForm.rtName" placeholder="请输入设备简称" size="small"></el-input>
          </el-form-item>
        </el-col>
        <div v-for="(rtParaItem,index) in terminalDialogForm.rtParaList" :key="rtParaItem.key">
          <el-col :span="12"  v-if="rtParaItem.key != 'token'">
            <el-form-item 
            :label="rtParaItem.name"
            :prop="'rtParaList.' + index + '.val'"
            :rules="{ required: rtParaItem.required, message: `${rtParaItem.name}不能为空`, trigger: 'blur' }"
            >
              <el-input :type="rtParaItem.typeKey" v-model="rtParaItem.val" :placeholder="[!terminalDialog.disabled?`请输入${rtParaItem.name}`:' ']" size="small"></el-input>
            </el-form-item>
          </el-col>
        </div>
        
        
        <el-col :span="12" >
          <el-form-item label="绑定门店:" prop="storeNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.storeNo"
              placeholder="请选择门店"
              @change="storeNoChange"
            >
              <el-option
                v-for="item in storeNoList"
                :key="item.rpsNo"
                :label="item.rpsName"
                :value="item.rpsNo"
              >
              <span style="float: left">{{ item.rpsName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpsNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定收银员:" prop="rpstNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpstNo"
              placeholder="请选择收银员"
              @change="rpstNoChange"
            >
              <el-option
                v-for="item in rpstNoList"
                :key="item.rpstNo"
                :label="item.rpstName"
                :value="item.rpstNo"
              >
              <span style="float: left">{{ item.rpstName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpstNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { getModelList, getrpstNo, getstoreNo,getRpsNo,queryStoreBySn } from "@/api/rb-merchant/terminal/terminal";

export default {
  props: {
    terminalDialog: {
      type: Object
    },
    //类型
    rptNoList: {
      type: Array,
      default:function(){
        return []
      }
    },
    //商户
    rpiNo: {
      type: String
    },
    // 终端表单
    terminalDForm:{
      type: Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    /**
     * @desc: 修改这个页面,terminal/component/terminalDialog.vue
     */
    return {
      terminalDialogForm:{},
      terminalDialogRules:{
          rptNo:[
            { required: true, message: '类型不能为空', trigger: 'blur' }
          ],
          rpsNo:[
            { required: true, message: '品牌名称不能为空', trigger: 'blur' }
          ],
          rpmNo:[
            { required: true, message: '设备型号不能为空', trigger: 'blur' }
          ],
          rpiNo:[
            { required: true, message: '商户不能为空', trigger: 'blur' }
          ],
          // belongType:[
          //   { required: true, message: '门店/收银员不能为空', trigger: 'blur' }
          // ],
          // storeNo:[
          //   { required: true, message: '门店不能为空', trigger: 'blur' }
          // ],
          // rpstNo:[
          //   { required: true, message: '收银员不能为空', trigger: 'blur' }
          // ],
          rsSn:[
            { required: true, message: '设备编号不能为空', trigger: ['blur','change'] },
            {
              pattern:/^[A-Za-z0-9]+$/,message:'设备编号由数字字母组成', trigger: ['blur','change'] 
            }
          ],
          rtName:[
            { required: true, message: '设备简称不能为空', trigger: 'blur' }
          ]
      },
      storeType:[],// 门店或收银员
      rpsNoList:[],// 供应商
      rpmNoList:[],// 型号
      storeNoList:[],// 门店
      rpstNoList:[],// 收银员
    };
  },
  watch: {
    terminalDialog: {
      handler() {
        let that = this;
        this.terminalDialogForm = this.terminalDForm;
        if (that.terminalDialog.type !== "add") {
          // that.terminalDialogForm.belongType = that.terminalDialogForm.belongType + "";

          let terminalDialogFormCopy=JSON.parse(JSON.stringify(that.terminalDialogForm))
          that.rpiNo=that.terminalDialogForm.rpiNo;
          //get供应商
          that.rptNoListChange();
          that.terminalDialogForm.rpsNo=terminalDialogFormCopy.rpsNo;
          //get型号
          that.rpsNoListChange(terminalDialogFormCopy.rpsNo);
          that.terminalDialogForm.rpmNo=terminalDialogFormCopy.rpmNo;
          //门店
          if(that.terminalDialogForm.rpiNo){
            that.rpiNoListChange();
            that.terminalDialogForm.storeNo=terminalDialogFormCopy.storeNo;
          }
          // 收银员
          if(that.terminalDialogForm.rpiNo){
            that.storeNoChange(that.terminalDialogForm.storeNo);
            that.terminalDialogForm.rpstNo=terminalDialogFormCopy.rpstNo;

          }

          // 回显 扩展属性
          if(this.terminalDialogForm.rtPara != ''&& this.terminalDialogForm.rtPara !="{}"){
            this.terminalDialogForm.rtPara = JSON.parse(this.terminalDialogForm.rtPara);//扩展结果
            let data = eval(this.terminalDialogForm.romParam);
            this.terminalDialogForm.romParam = JSON.parse(JSON.stringify(data));//扩展
            
            this.$set(this.terminalDialogForm,'rtParaList',[]);
            this.terminalDialogForm.rtParaList = this.terminalDialogForm.romParam.map(itm=>{
              itm.val=this.terminalDialogForm.rtPara[itm.key];
              return itm
            })

            this.terminalDialogForm.rtParaList = JSON.parse(JSON.stringify(this.terminalDialogForm.romParam))
            this.$forceUpdate();
          }else{
            that.terminalDialogForm.rtParaList=[];
            that.$forceUpdate();
          }
        }else{
          this.rptNoListChange();//供应商
          this.rpiNoListChange();//门店
        }
      },
      deep: true,
      immediate: true,
    }
  },
  created(){
    this.doGetDicts();
  },
  methods: {
    /* 根据sn获取库存 */
    apiQueryStoreBySn(){
      let that = this;
      if(this.terminalDForm.rsSn){
        queryStoreBySn({rsSn:this.terminalDForm.rsSn,queryType:1}).then(res =>{
          if(res.data.data.rpsNo){
            that.terminalDialogForm.rpsNo = res.data.data.rpsNo;
          }
          
          if(res.data.data.cardCode){
            const index = that.terminalDialogForm.rtParaList.findIndex(obj => obj.key === 'SIM');
            if(index != -1){
              that.$set(that.terminalDialogForm.rtParaList[index],'val',res.data.data.cardCode);
            }
          }

          if(res.data.data.rpmNo){
            that.rpsNoListChange()
            that.terminalDialogForm.rpmNo = res.data.data.rpmNo;
          }
        })
      }
    },
    // 字典
     doGetDicts() {
      // 门店或收银员
      getDictionary({ code: "belong_type" }).then((res) => {
        this.storeType = res.data.data;
      });
    },
    // 表单清空
    initEmpty() {
      this.$refs['terminalDialogForm'].resetFields();
      // this.$refs['terminalDialogForm'].terminalDialogForm = {};
      this.$refs['terminalDialogForm'].terminalDialogForm = {};
    },
     // 选择供应商---获取型号
    rpsNoListChange(value){
      this.terminalDialogForm.rpmNo="";
      this.rpmNoList=[];
      getModelList(-1,-1,{rptNo:19,rpsNo:value}).then((res)=>{
        this.rpmNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择类型---获取型号列表
    rptNoListChange(){
      // 供应商
      this.terminalDialogForm.rpmNo="";
      this.rpmNoList=[];
      // 型号
      this.terminalDialogForm.rpsNo="";
      this.rpsNoList=[];
      
      getRpsNo(-1,-1,{rptNo:19}).then((res)=>{
        this.rpsNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择型号
    rpmNoChange(value){
      this.terminalDialogForm.rpmNo = value;
      const index = this.rpmNoList.findIndex(obj => obj.rpmNo === value);
      if(index != -1){
        const item = this.rpmNoList[index];
        if(item.romParam){
          const data = eval(item.romParam);
          this.$set(this.terminalDialogForm,'rtParaList',[]);//romParam
          this.terminalDialogForm.rtParaList=JSON.parse(JSON.stringify(data));
          this.$forceUpdate()
        }else{
          this.terminalDialogForm.rtParaList=[];
          this.$forceUpdate()
        }
      }else{
        this.$forceUpdate()
      }
    },
    //选择商户---获取门店
    rpiNoListChange(){
      this.terminalDialogForm.storeNo="";//门店
      this.storeNoList=[];//门店
      this.terminalDialogForm.rpstNo="";//收银员
      this.rpstNoList=[];//收银员
      getstoreNo(-1,-1,{rpiNo:this.rpiNo}).then((res)=>{
        this.storeNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择门店---获取收银员
    storeNoChange(rpsNo){
      this.rpstNoList=[];//收银员list
      getrpstNo(-1,-1,{rpsNo}).then((res)=>{
        this.rpstNoList = res.data.data.records;
      })
      this.terminalDialogForm.rpstNo="";//收银员
      this.$forceUpdate()
    },
    // 选择收银员 change 回调
    rpstNoChange(){
      this.$forceUpdate()
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-select {
  width:100%
}
/deep/ .el-input.is-disabled .el-input__inner{
  background-color: #fff;
}

/deep/ .el-form-item__content .el-input-group {
  vertical-align: baseline;
}
</style>
